import React, { Component } from "react";
import "./App.css";
import "./public/icon/iconfont.css";
import { Icon } from "antd-mobile";
import Item from "./components/Item/Item";
import SolutionPicker from './components/SolutionPicker/index'
//导入store
import store from "./redux/store";
//导入action
import { getAirList } from "./redux/actionsCreater";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowIndex: 1,
      showDate: true,
      nowDateIndex: 0,
      changeSortMin: false, //采用升序
      changeSortMax: true, //采用降序
      selectDateAll: [],
      scrollLeft: 0,
      airList: [],
      sortSolutions:{
        selectDate: '06-21',
        type: '1',
        sort: 'asc',
      },
      show: false
    };
  }
  componentDidMount() {
    store.dispatch(getAirList());
    this.initData();
    this.getListChange();
  }
  getListChange() {
    store.subscribe(() => {
      const data = store.getState().data.data;
      this.setState({ airList: data });
      console.log(data);
    });
  }
  initData() {
    fetch("/dateList", {
      method: "get",
    })
      .then((res) => {
        return res.json();
      })
      .then((res) => {
        console.log(res.data);
        this.setState({ selectDateAll: res.data });
      });
  }
  showPickerFun(){
    this.setState({show: false})
  }
  render() {
    const bottomSelectData = [
      { title: "筛选", icon: "iconfont icon-shaixuan" },
      {
        title: "推荐排序",
        icon: "iconfont icon-paixu",
      },
      {
        title: "时间",
        icon: "iconfont icon-shijian",
        sortMin: { title: "从早到晚", value: "asc" },
        sortMax: { title: "从晚到早", value: "desc" },
      },
      {
        title: "价格",
        icon: "iconfont icon-jiage",
        sortMin: { title: "从低到高", value: "asc" },
        sortMax: { title: "从高到低", value: "desc" },
      },
    ];
    const lookNotice = () => {
      console.log(111);
    };
    const selectBottom = async (index) => {
      if(index === 0){
        this.setState({show: true})
        return false
      }
      this.setState({ nowIndex: index });
      console.log(bottomSelectData[index]);
      let sortType = bottomSelectData[index]
      const newSorts = {...this.state.sortSolutions}
      newSorts.type = index
      //升序
      if (this.state.changeSortMin && this.state.changeSortMax === false) {
        console.log("min", this.state.changeSortMin);
        await this.setState({ changeSortMin: false });
        await this.setState({ changeSortMax: true });
        newSorts.sort = sortType.sortMax?sortType.sortMax.value:''
        await this.setState({sortSolutions: newSorts})
        console.log(this.state.sortSolutions);
        if(index !== 0){
          store.dispatch(
            getAirList({
              ...this.state.sortSolutions
            })
          );
        }
        return false
      }
      //降序
      if (this.state.changeSortMax && this.state.changeSortMin === false) {
        console.log("max", this.state.changeSortMax);
        await this.setState({ changeSortMin: true });
        await this.setState({ changeSortMax: false });
        newSorts.sort = sortType.sortMin?sortType.sortMin.value:''
        await this.setState({sortSolutions: newSorts})
        console.log(this.state.sortSolutions);
        if(index !== 0){
          store.dispatch(
            getAirList({
              ...this.state.sortSolutions
            })
          );
        }
        return false
      }
    };
    //日期切换
    const selectDate = async (index) => {
      this.setState({ nowDateIndex: index });
      console.log(index);
      if (index >= 2) {
        this.setState({ scrollLeft: (index - 2) * 62 });
      }
      if (index < 2) {
        this.setState({ scrollLeft: 0 });
      }
      let newSorts = {...this.state.sortSolutions}
      newSorts.selectDate = [...this.state.selectDateAll][index].date
      await this.setState({
        sortSolutions: newSorts
      });
      console.log(this.state.sortSolutions);
      await store.dispatch(
        getAirList({
          ...this.state.sortSolutions
        })
      );
    };
    const handleOnScroll = () => {
      this.setState({ showDate: false });
      console.log(this.state.showDate);
    };
    const findWeek = (datestr) => {
      var weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      var week = weekArray[new Date(datestr).getDay()];
      return week;
    };
    return (
      <div className="App">
        <div className="goTop"></div>
        <div className="bottomSelect">
          {bottomSelectData.map((item, index) => {
            return (
              <div
                className={
                  "itemSelect " +
                  (this.state.nowIndex === index ? "active" : "")
                }
                onClick={() => selectBottom(index)}
                key={index}
              >
                <i className={item.icon}></i>
                <p>
                  {item.sortMin
                    ? this.state.changeSortMin && this.state.nowIndex === index
                      ? item.sortMin.title
                      : this.state.changeSortMax &&
                        this.state.nowIndex === index
                      ? item.sortMax.title
                      : item.title
                    : item.title}
                </p>
              </div>
            );
          })}
        </div>
        <div className="appHeader">
          <div className="left-action">
            <Icon type="left" color="#7ff" size="lg"></Icon>
          </div>
          <span>
            重庆<i className="iconfont icon-single_arrow"></i>北京
          </span>
          <div className="right-search">
            <Icon type="search" color="#fff" size="md"></Icon>
          </div>
        </div>
        <div className="content">
          <div className="appDate">
            <div>
              <div className="date">
                <div
                  style={{
                    marginLeft: -this.state.scrollLeft,
                    transition: "margin-left 0.3s ease 0s",
                  }}
                >
                  {this.state.selectDateAll &&
                    this.state.selectDateAll.map((item, index) => {
                      return (
                        <div
                          className={
                            "itemData " +
                            (this.state.nowDateIndex === index ? "active" : "")
                          }
                          key={index}
                          style={{ marginLeft: index * 62 + "px" }}
                          onClick={() => selectDate(index)}
                        >
                          <p className="one">{item.date}</p>
                          <p>{findWeek(`2021-${item.date}`)}</p>
                          <p>￥{item.money}</p>
                        </div>
                      );
                    })}
                </div>
              </div>
            </div>
            <div className="moreDate">
              <i
                className="iconfont icon-riqi"
                style={{ fontSize: "24px", marginTop: "5px" }}
              ></i>
              <p className="more">更多日期</p>
            </div>
          </div>
          <div className="notice" onClick={lookNotice}>
            <div className="tips">
              <span>【优惠活动】</span>
              <span>登录APP购票可享受更多优惠活动，享受惊喜价格</span>
            </div>
            <div className="tips twoTip">
              <span>【北京出行提醒】</span>
              <span>
                根据北京市人民政府最新消息：
                1、中高风险地区原则上不能进京，国内中高风险地区及全域实行封闭管理的人员，原则上不能进京。确需进京的须经当地省级疫情防控部门批准，持72小时内核酸检测阴性证明方可进京。
                2、北京对国内其他口岸入境人员满21天方可进京，进京后补足7天健康监测，未满21天已进京的补足7天居家或集中隔离、7天健康监测。
                更多详细信息，请务必登录北京市人民政府官方网站查看，按照官方通知为准。
                以上信息供您参考，因疫情传播风险较强，各地疫情防控政策可能随时调整，请您在出行前务必参照当地最新疫情防控规定，合理安排出行。
                更新日期：2021年5月20日09:30
              </span>
            </div>
            <div className="tips threeTip">
              <span>【国内出行提示】</span>
              <span>
                受新冠疫情影响，各地疫情防控政策调整频繁，请在出行前务必与出发地以及目的地疫情管控相关单位进一步确认核酸检测报告时限要求以及落地管控政策，合理安排出行。
                更新日期2021年6月7日15:00
              </span>
            </div>
            <i className="tip">&gt;</i>
          </div>
          <div className="blank"></div>
          <div className="items" onScrollCapture={handleOnScroll}>
            {this.state.airList &&
              this.state.airList.map((item, index) => {
                return <Item dataItem={item} key={index}></Item>;
              })}
          </div>
        </div>
        <SolutionPicker showPicker={this.state.show} cancle={this.showPickerFun.bind(this)}></SolutionPicker>
      </div>
    );
  }
}

export default App;
